<template>
  <div>
    <div class="single-page-container-view">
      <div class="header-bar">
        <div class="container">
          <el-row>
            <el-col :span="6">
              <div class="logo-bar">
                <img src="../assets/logo.png"/>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="contact-list">
                <router-link to="/"><i class="iconfont icon-youjian cyan"></i></router-link>
                <router-link to="/"><i class="iconfont icon-weixin green"></i></router-link>
                <router-link to="/"><i class="iconfont icon-facebook3 blue"></i></router-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="main-bar">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .single-page-container-view{
    .header-bar{
      border-bottom: solid 1px #e6e6e6;
      box-shadow: 0 2px 5px #ccc;
      .logo-bar{
        text-align: center;
        padding: 5px 0;
        img {
          height: 50px;
          display: inline-block;
          vertical-align:top;
        }
      }
      .contact-list{
        float: right;
        padding: 10px 0;
        a {
          margin-right: 16px;
          i{
            font-size: 36px;
            &.cyan {
              color: #5ac;
            }
            &.green {
              color: #00b900;
            }
            &.blue {
              color: #4466aa;
            }
          }
          &:last-child{
            margin-right: 0;
          }
        }
      }
    }
  }
</style>
